<template lang='pug'>
  div.pos-r
    .card.mb-15(v-if="isShuifei")
      | 按金额比例收费
      .ratio-item(v-for="(item, index) in taxRateArr" :key="index")
        span {{taxTextArr[index]}}：
        Input.input-has-border(v-model="item.rate" type="number" style="width:100px")
        | %
</template>

<script>
import InsureProjectApi from '@/api/InsureProject.api.js'
export default {
  name:'',
  props:{
    isShuifei: Boolean,
    formValidate: Object
  },
  data () {
    return {
      // 税费方案
      taxTextArr:['社保', '公积金', '商保', '薪资', '服务费'],
      taxRateArr: [
        {category: '1', rate: 0}, 
        {category: '2', rate: 0}, 
        {category: '4', rate: 0}, 
        {category: '8', rate: 0}, 
        {category: '16', rate: 0}
      ],
    }
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    chargeChange (val) {
      console.log(val)
    },
    submit () {
      InsureProjectApi.PostTaxProject({
        Name: this.formValidate.name,
        Details: this.taxRateArr
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
          this.refreshData()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 重置数据
    refreshData () {
      Object.assign(this.$data, this.$options.data())
    }
  },

  watch: {
  }

}

</script>
<style lang='less' scoped>
  .card{
    display: block;
    border: 1px solid #dcdee2;
    padding: 16px;
    border-radius: 4px;
  }
  .d-f-c{
    display: flex;
    align-items: center;
  }
  .pos-r{
    position: relative;
  }
  .has-line{
    position: relative;
    &:before{
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background: #eee;
      position: absolute;
      top: 12px;
      left: 0;
    }
    span{
      display: inline-block;
      background: #fff;
      padding: 0 5px 0 18px;
      position: relative;
      margin-left: 30px;
      font-size: 14px;
      color: red;
    }
    button{
      position: relative;
    }
  }
  .early-collection{
    display: inline-block;
  }
  .ratio-item{
    margin-top: 10px;
    span{
      display: inline-block;
      width: 60px;
    }
  }
</style>